<template>
	<view class="wp" v-if="list.length>0">
		<view class="item" v-for="item in list" :key="item.id" @click="$navTo(item.link)">
			<image class="title" :src="item.thumb" mode="widthFix"></image>
			<view class="shop" v-if="item.goods.length>0">
				<view class="s_item" v-for="ic in item.goods" :key="ic.goodsid"
					@click.stop="$navTo('/pages/product/product?id='+ic.goodsid)">
					<image :src="ic.thumb" ></image>
					<view class="money" :style="{background: bg}">￥{{ic.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sale_price',
		props: {
			bg: {
				type: String,
				default: '#fff'
			},
			list: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="scss">
	.wp {
		background-color: #fff;
		border-radius: 20upx;
		font-size: 0;
		overflow: hidden;
		padding: 20upx 0;

		.item {
			display: inline-block;
			width: 50%;
			position: relative;

			.title {
				width: 100%;
				height: 270upx;
			}

			.shop {
				background-color: #fff;
				border-radius: 30upx;
				box-sizing: border-box;
				height: 69%;
				position: absolute;
				bottom: 3px;
				width: calc(100% - 37upx);
				margin:  0 12upx 0 25upx;
				overflow: hidden;

				.s_item {
					display: inline-block;
					height: 100%;
					width: 50%;
					text-align: center;

					image {
						width: 100%;
						height: calc(100% - 37upx);
					}
				}

				.money {
					background: $bg-color;
					border-radius: 30upx;
					color: #fff;
					display: inline-block;
					font-size: 26upx;
					line-height: 35upx;
					width: 70%;
				}
			}
		}
		.item:nth-of-type(2n +2 ){
			.shop{
				margin:  0 20upx 0 15upx;
			}
		}
	}
</style>